<template>
  <div class="box">
    <div class="block">
      <el-date-picker v-model="years" type="year" placeholder="选择年">
      </el-date-picker>
      <el-button @click="add" icon="el-icon-search" circle></el-button>
    </div>

    <div ref="chart" style="width: 100vw; height: 60vh"></div>
  </div>
</template>

<script>
// import '../../../assets/css/reportform.less'
export default {
  data() {
    return {
      years: "",
      uid: this.$jwt(localStorage.getItem("User-Token")).uid,
    };
  },
  methods: {
    ajax() {
      let dataA = [];
      let dataB = [];
      this.$http
        .get("/api/report/census", {
          datatime: this.years.getFullYear(),
          uid: this.uid,
        })
        .then((res) => {
          res.reportData.forEach((element) => {
            if (element.mo_flage == 1) {
              dataA.push({ value: element.mo_money, name: element.type_name });
            } else if (element.mo_flage == 0) {
              dataB.push({ value: element.mo_money, name: element.type_name });
            }
          });

          let myChart = this.$echarts.getInstanceByDom(this.$refs.chart);
          if (myChart == null) {
            myChart = this.$echarts.init(this.$refs.chart);
          }
          let option = {
            title: {
              text: "类型统计",
              subtext: "",
              x: "center",
            },
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            legend: {
              orient: "vertical",
              right: "right",
            },
            series: [
              {
                name: "收入",
                type: "pie",
                radius: "30%",
                center: ["35%", "35%"],
                data: dataA,
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
              {
                name: "支出",
                type: "pie",
                radius: "30%",
                center: ["65%", "65%"],
                data: dataB,
              },
            ],
          };

          myChart.setOption(option);
        });
    },
    add() {
      if (this.years) {
        this.ajax();
      } else {
        alert("请输入年份");
      }
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.box {
  height: 90vh;
  p {
    display: flex;
    height: 2rem;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    background-color: rgb(219, 219, 219);
    a {
      flex: 4;
      height: 2rem;
      line-height: 2rem;
      color: #000;
    }
    span {
      flex: 2;
      color: royalblue;
      line-height: 2rem;
    }
  }
}
</style>